<div class="layui-fluid" id="VIEW-list-table" lay-title="菜单列表">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body nepadmin-table-full">
                    <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action layui-btn-xstree"
                             onclick="openAll();">展开或折叠全部
                        </div>
                    </div>
                </div>
                <div class="dBody">
                    <table class="layui-hide" id="treeTable" lay-filter="treeTable"></table>
                </div>
            </div>
            <table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>
        </div>
    </div>
</div>
<script>
    var editObj = null, ptable = null, treeGrid = null, tableId = 'treeTable', layer = null;
    layui.use(['jquery', 'treeGrid', 'layer', 'admin'], function () {
        var $ = layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer = layui.layer;
        admin = layui.admin;
        //刷新当前页
        layui.view.tab.refresh()
        ptable = treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , url: 'menu/lists'
            , cellMinWidth: 100
            , idField: 'mid'//必須字段
            , treeId: 'mid'//树形id字段名称
            , treeUpId: 'parent_id'//树形父id字段名称
            , treeShowName: 'title'//以树形式显示的字段
            , heightRemove: [".dHead", 10]//不计算的高度,表格设定的是固定高度，此项不生效
            , height: '100%'
            , isFilter: false
            , iconOpen: true//是否显示图标【默认显示】
            , isOpenDefault: false//节点默认是展开还是折叠【默认展开】
            , loading: true
            , method: 'post'
            , isPage: false
            , response: {
                statusCode: 200,
            }
            , cols: [[
                {type: 'checkbox', sort: true},
                {field: 'mid', width: 100, title: 'id',}
                , {field: 'list_order', width: 100, title: '排序', type: "text"}
                , {field: 'title', title: '菜单名称',}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        var status = {
                            1: {title: '已启用', color: 'blue'},
                            0: {title: '已禁用', color: 'red'},
                        }[d.status];
                        return '<span class="layui-badge layui-bg-' + status.color + '">' + status.title + '</span>'
                    }
                }
                , {
                    width: 300, title: '操作', align: 'center'/*toolbar: '#barDemo'*/
                    , templet: function (d) {
                        var html = '';
                        var addBtn = '<a class="layui-btn layui-btn-sm  table-action" lay-event="add">添加下一级</a>';
                        if (d.lay_level >= 3) {
                            addBtn = '<a class="layui-btn layui-btn-sm  table-action layui-btn-disabled" lay-event="add">添加下一级</a>'
                        }
                        var editBtn = '<a class="layui-btn layui-btn-sm layui-btn-primary table-action" lay-event="edit">编辑</a>';
                        var delBtn = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return addBtn + editBtn + delBtn;
                    }
                }
            ]]
        });

        treeGrid.on('tool(' + tableId + ')', function (obj) {
            switch (obj.event) {
                case "del":
                    del(obj);
                    break;
                case "edit":
                    edit(obj);
                    break;
                case "add":
                    add(obj);
                    break;
            }
        });
    });


    function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title: '提示'},
            function (index) {//确定回调
                admin.post({
                    api: "delMenu",
                    data: {id: obj.data.mid},
                    success: function (res) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 800 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            layui.view.tab.refresh();
                            obj.del();
                            layer.close(index);
                        });
                    },
                    error: function (res) {
                        layer.msg(res.msg, {
                            icon: 2,
                            time: 800 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            layui.view.tab.refresh();
                        });
                    },
                })
            }, function (index) {//取消回调
                layer.close(index);
            }
        );
    }

    function add(obj) {
        if (obj.data.lay_level >= 3) {
            return false
        }
        //页面跳转到添加页面
        admin.navigate("/menu/save?parent_id=" + obj.data.mid);
    }
    function edit(obj) {
        //页面跳转到添加页面
        admin.navigate("/menu/save?id=" + obj.data.mid);
    }

    function openorclose() {
        var map = treeGrid.getDataMap(tableId);
        var o = map['102'];
        treeGrid.treeNodeOpen(tableId, o, !o[treeGrid.config.cols.isOpen]);
    }


    function openAll() {
        var treedata = treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId, !treedata[0][treeGrid.config.cols.isOpen]);
    }

    function getCheckData() {
        var checkStatus = treeGrid.checkStatus(tableId)
            , data = checkStatus.data;
        layer.alert(JSON.stringify(data));
    }

    function radioStatus() {
        var data = treeGrid.radioStatus(tableId)
        layer.alert(JSON.stringify(data));
    }

    function getCheckLength() {
        var checkStatus = treeGrid.checkStatus(tableId)
            , data = checkStatus.data;
        layer.msg('选中了：' + data.length + ' 个');
    }
</script>
